<script setup>
import { ref } from 'vue'

// 违规投诉详情页数据
const complaintDetail = {
  title: '古浪-河口天然气联络管道工程施工第二标段位于甘肃省兰州市永登县、西固区境内',
  date: '2023年04月13日',
  status: '审核通过, 等待转办',
  location: '甘肃省-兰州市-永登县',
  company: '中油（新疆）石油工程有限公司;国家管网集团联合管道西部分公司',
  detailLocation: '兰州市永登县终点为西固区',
  type: '生态破坏',
  complaintDate: '2023-04-06',
  duration: '1年以下',
  governmentContact: '否',
  description: '[附件： 太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目附件]',
  details: [
    { type: 'sectionTitle', text: '详情描述' },
    { type: 'sectionSubTitle', text: '违法行为:' },
    { type: 'paragraph', text: '(1) 项目在未履行国土、环保审批手续的情况下未批先建。破坏农田、林地、草原，严重损害当地生态环境。' },
    { type: 'paragraph', text: '(2) 现场执行环保标准不到位。管沟回填基坑不执行分层并控制高。表层土和底层土未分层堆放，回填后无法保持植物生长的原有生活环境，水土流失严重，无防扬尘措施，较去年同期环境空气有明显变化。' },
    { type: 'sectionSubTitle', text: '预期解决:' },
    { type: 'paragraph', text: '(1) 相关部门应依法依规协助停止该项目违法行为，坚决整改，符合国家环保和土地法规后再进行施工。' },
    { type: 'paragraph', text: '(2) 当地政府及部门应依法部门履职到位，对之前违法事件进行处罚及追诉。避免此类事件发生，确保监管不留于表面，坚持"零容忍"的态度依法查处违法行为，拒绝姑息发展。' }
  ]
}
</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>违规投诉</el-breadcrumb-item>
      <el-breadcrumb-item>违规投诉详情页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <el-card class="main-card">
      <div class="detail-title">{{ complaintDetail.title }}</div>
      <div class="detail-meta">
        <span>发布时间：</span>
        <span>{{ complaintDetail.date }}</span>
      </div>
      <div class="detail-status-container">
        <span class="detail-status">当前状态: {{ complaintDetail.status }}</span>
      </div>

      <div class="detail-info">
        <div><span>发生地: </span>{{ complaintDetail.location }}</div>
        <div><span>污染企业名称: </span>{{ complaintDetail.company }}</div>
        <div><span>详细位置: </span>{{ complaintDetail.detailLocation }}</div>
        <div><span>污染类型: </span>{{ complaintDetail.type }}</div>
        <div><span>投诉时间: </span>{{ complaintDetail.complaintDate }}</div>
        <div><span>污染持续时间: </span>{{ complaintDetail.duration }}</div>
        <div><span>是否对政府公开联系方式: </span>{{ complaintDetail.governmentContact }}</div>
      </div>

       <div class="detail-attach">
        <img src="../../images/公告列表详情页/u251.png" class="logo-img2" />
        <span class="attach-label">附件：</span>
         <img src="../../images/公告列表详情页/u252.png" class="logo-img2" />
        <span class="attach-file">{{ complaintDetail.description }}</span>
      </div>

      <div class="detail-content">
        <template v-for="(item, index) in complaintDetail.details" :key="index">
          <div v-if="item.type === 'sectionTitle'" class="section-title">{{ item.text }}</div>
          <div v-else-if="item.type === 'sectionSubTitle'" class="section-subtitle">{{ item.text }}</div>
          <div v-else>{{ item.text }}</div>
        </template>
      </div>

    </el-card>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 16px;
}
.el-breadcrumb {
  margin: 8px 0 8px 32px;
}
.main-card {
  border-radius: 8px;
  margin: 0 auto;
  box-shadow: 0 2px 8px #f0f1f2;
  margin-top: 8px;
  padding: 24px;
}
.detail-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 8px;
  text-align: left;
  word-break: break-word;
}
.detail-meta {
  color: #666;
  font-size: 1rem;
  margin-bottom: 8px;
  text-align: center;
  word-break: break-word;
}
.detail-status-container {
    margin-bottom: 18px;
    text-align: right;
}
.detail-status {
    color: orange;
    font-weight: bold;
}
.detail-info {
    margin-bottom: 18px;
    font-size: 1rem;
    color: #222;
    line-height: 2;
    text-align: left;
    word-break: break-word;
}
.detail-info span {
    font-weight: bold;
}
.detail-attach {
  margin-top: 12px;
  color: #666;
  font-size: 1rem;
  text-align: left;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.logo-img2 {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
.attach-label {
  margin-left: 4px;
  margin-right: 4px;
}
.attach-file {
  color: #409EFF;
  cursor: pointer;
  word-break: break-word;
}
.detail-content {
  color: #222;
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 18px;
  text-align: left;
  word-break: break-word;
}
.detail-content div {
  margin-bottom: 1em; /* 段落间距 */
}
.section-title {
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 4px;
  text-align: left; /* 详情页章节标题不需要居中 */
  word-break: break-word;
  font-size: 1.2rem;
}
.section-subtitle {
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 4px;
    text-align: left;
    word-break: break-word;
    font-size: 1.1rem;
}
</style>